<script setup lang="ts">
import { reqCancelOrder, reqOrderInfo } from '@/apis/user';
import { OrderResponseData } from '@/apis/user/type';
import { Check } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const $route = useRoute()
const orderInfo = ref<any>({})
onMounted(() => {
  getOrderInfo()
})
const dialogVisible = ref<boolean>(false)

const getOrderInfo = async () => {
  const res: OrderResponseData = await reqOrderInfo($route.query.orderId as string)
  if (res.code == 200) {
    orderInfo.value = res.data
  }
}

const cancel = async () => {
  try {
    await reqCancelOrder($route.query.orderId as string)
    getOrderInfo()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: "取消预约失败"
    })
  }
}

const changeDialog = () => {
  dialogVisible.value = !dialogVisible.value
}

const fakePay = () => {
  orderInfo.value.orderStatus = 1
  orderInfo.value.param.orderStatusString = "已支付"
  changeDialog()
}
</script>



<template>
  <el-card class="box-card">
    <template #header>
      <div class="datail">
        挂号详情
      </div>
    </template>
    <div class="top">
      <el-tag type="success" effect="light" round>
        <div class="tag">
          <el-icon>
            <Check />
          </el-icon>
          <span>{{ orderInfo.param?.orderStatusString }}</span>
        </div>
      </el-tag>
      <div class="right_info">
        <img src="../../../../assets/images/code_app.png" alt="">
        <div class="message">
          <p>微信
            <svg t="1734752743369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4319" width="16" height="16">
              <path
                d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                fill="#28C445" p-id="4320"></path>
              <path
                d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                fill="#28C445" p-id="4321"></path>
            </svg>
            关注 "北京114预约挂号"
          </p>
          <p>"快速预约挂号"</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                就诊人信息
              </div>
            </template>
            {{ orderInfo.patientName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                就诊日期
              </div>
            </template>
            {{ orderInfo.reserveDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                就诊医院
              </div>
            </template>
            {{ orderInfo.hosname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                就诊科室
              </div>
            </template>
            {{ orderInfo.depname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                医生职称
              </div>
            </template>
            {{ orderInfo.title }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                医事服务费
              </div>
            </template>
            <span style="color: red;">{{ orderInfo.amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                挂号单号
              </div>
            </template>
            {{ orderInfo.outTradeNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                挂号时间
              </div>
            </template>
            {{ orderInfo.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="btn" v-if="orderInfo.orderStatus != -1">
          <el-popconfirm title="确认取消预约吗?" @confirm="cancel">
            <template #reference>
              <el-button>取消预约</el-button>
            </template>
          </el-popconfirm>
          <el-button v-if="orderInfo.orderStatus == 0" type="primary" size="default"
            @click="changeDialog">支付</el-button>
        </div>
      </div>
      <div class="right">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>注意事项</span>
            </div>
          </template>
          <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
          <p style="color: red">
            2.【取号】就诊当天需在{{ orderInfo.fetchTime }}
            在医院取号，未取号视为爽约，该号不退不换；
          </p>
          <p>
            3.【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；
          </p>
          <p>
            4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
          </p>
          <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
        </el-card>
      </div>
    </div>
  </el-card>~
  <el-dialog v-model="dialogVisible" title="微信支付" width="500px">
    <div class="qrocode">
      <img style="width: 260px;height: 260px;" src="../../../../assets/images/image.png" alt="" @click="fakePay">
      <p>请使用微信扫一扫</p>
      <p>扫描二维码支付</p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="changeDialog">
          关闭窗口
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>



<style scoped lang="scss">
.box-card {
  .datail {
    color: #7f7f7f;
    font-weight: 900;
  }

  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px;

    .tag {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;

      span {
        margin-left: 5px;
      }
    }

    .right_info {
      display: flex;

      img {
        width: 40px;
        height: 40px;
      }

      .message {
        margin-left: 5px;
        line-height: 20px;
      }
    }
  }

  .bottom {
    display: flex;
    margin-top: 20px;

    .left {
      flex: 4;

      .btn {
        margin-top: 20px;
      }
    }

    .right {
      flex: 6;
      margin-left: 30px;

      p {
        line-height: 30px;
      }
    }
  }
}

.qrocode {
  margin: 40px 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    line-height: 30px;
  }
}
</style>